<template>
  <div>
    <el-card class="box-card" v-model="users">
      <div slot="header" class="clearfix">
        <span style="float: left">个人信息</span>
      </div>
      <el-form class="ims">
        <el-form-item>
          <el-upload
              class="avatar-uploader"
              action="http://localhost:8080/upload"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
          >
            <img v-if="updatePicture.avatar" :src="updatePicture.avatar" class="avatar">
          </el-upload>
          <el-button type="primary" v-on:click="updatePic" class="but-ton">修改头像</el-button>
        </el-form-item>
      </el-form>

      <div class="text item" v-model="user">
        <div style="width: 330px;height: 30px" >
          <hr>
          <label class="el-col-lg-offset-1"><i class="el-icon-user-solid"/>用户名称</label>
          <label style="text-align: right" class="el-col-17">{{ user.userName }}</label>
        </div>
        <div style="width: 330px;height: 30px" >
          <hr>
          <label class="el-col-lg-offset-1"><i class="el-icon-mobile-phone"/>手机号码</label>
          <label style="text-align: right" class="el-col-17">{{ user.phonenumber }}</label>
        </div>
        <div style="width: 330px;height: 30px" >
          <hr>
          <label class="el-col-lg-offset-1"><i class="el-icon-message"/>用户邮箱</label>
          <label style="text-align: right" class="el-col-17">{{ user.email }}</label>
        </div>
        <div style="width: 330px;height: 30px" >
          <hr>
          <label class="el-col-lg-offset-1"><i class="el-icon-s-help"/>所属部门</label>
          <label style="text-align: right" class="el-col-17">{{ user.sysDept.deptName }}/{{ user.sysPost.postName }}</label>
        </div>
        <div style="width: 330px;height: 30px" >
          <hr>
          <label class="el-col-lg-offset-1"><i class="el-icon-s-check"/>所属角色</label>
          <label style="text-align: right" class="el-col-17">{{ user.sysRole.roleName }}</label>
        </div>
        <div style="width: 330px;height: 30px" >
          <hr>
          <label class="el-col-lg-offset-1"><i class="el-icon-date"/>创建时间</label>
          <label style="text-align: right" class="el-col-17">{{ user.createTime }}</label>
        </div>
        <hr>
      </div>
    </el-card>

    <el-card class="box-card2">
      <div slot="header" class="clearfix">
        <span style="float: left">基本资料</span>
      </div>
      <el-tabs v-model="active">
        <el-tab-pane label="基本资料" name="first" @click="updateBuilding(users)">

          <el-form label-width="100px" class="demo-ruleForm">
            <el-form-item label="用户名称">
              <el-input v-model="user.nickName"></el-input>
            </el-form-item>
            <el-form-item label="电话号码">
              <el-input v-model="user.phonenumber"></el-input>
            </el-form-item>
            <el-form-item label="邮箱">
              <el-input v-model="user.email"></el-input>
            </el-form-item>
            <el-form-item label="性别" prop="resource">
              <el-radio-group v-model="user.sex">
                <el-radio label="1">男</el-radio>
                <el-radio label="0">女</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" v-on:click="savaUser2">保存</el-button>
              <el-button>关闭</el-button>

            </el-form-item>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="修改密码" name="second" >
          <el-form label-width="100px" class="demo-ruleForm" :rules="rules"  :model="updatePassword">
            <el-form-item label="旧密码" prop="oldPassword">
              <el-input placeholder="请输入旧密码" type="password" v-model="updatePassword.oldPassword" show-password @blur="zdPassword"></el-input>
              <div style="color: red;position: relative;margin-left: -870px;font-size: 10px;height: 12px">
              </div>
            </el-form-item>
            <el-form-item label="新密码" prop="newPassword">
              <el-input placeholder="请输入新密码" prop="newPassword" v-model="updatePassword.newPassword" type="password" show-password></el-input>
              <div style="color: red;position: relative;margin-left: -800px;font-size: 10px;height: 12px">
              </div>
            </el-form-item>
            <el-form-item label="确认密码" prop="confirmNewPassword">
              <el-input placeholder="请输入密码" v-model="updatePassword.confirmNewPassword" type="password" show-password @blur="toComfirmNewPassword"></el-input>
              <div style="color: red;position: relative;margin-left: -800px;font-size: 10px;height: 12px;">
                {{message}}
              </div>
            </el-form-item>

            <el-form-item>
              <el-button type="primary" v-on:click="savaUser">保存</el-button>
              <el-button>关闭</el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>


</template>

<script>
export default {
  name: "PersonView",
  data() {
    return {

      users: null,
      dialogAddVisible: false,//添加
      dialogUpdateVisible: false,//修改,
      current: 1,
      size: 5,
      pages: 0,
      total: 0,
      active: "first",
      buildingName: "",
      buildingCode: "",
      userName: '',
      upd: true,
      del: true,
      updatePicture:null,
      // 表单规则
      password: "",
      oldPassword: "",
      newPassword: "",
      confirmNewPassword:"",
      rules: {
        oldPassword: [
          {required: true, message: '输入旧密码', trigger: 'blur'},
          {min: 3, max: 20, message: '长度不能少于3个字符', trigger: 'blur' }
        ],
        newPassword: [
          {required: true, message: '请输入新密码', trigger: 'blur'},
          {min: 3, max: 20, message: '长度不能少于3个字符', trigger: 'blur'}
        ],
        confirmNewPassword: [
          {required: true, message: '输入旧密码', trigger: 'blur'},
          {min: 3, max: 20, message: '长度不能少于3个字符', trigger: 'blur'}
        ],
      },
      user: {
        userId: 0,
        deptId: "",
        userName: "",
        nickName: "",
        userType: "",
        email: "",
        phonenumber: "",
        sex: "",
        avatar: "",
        password: "",
        status: "",
        createTime: "",
        oldPassword:""
      },
      message:"",
      messaget:"",
      messagete:"",
      eXPassword:"",
      updatePassword:{
        oldPassword: "",
        newPassword: "",
        confirmNewPassword:"",
      }
    }
  },
  methods: {
    localUsers(current) {
      this.current = current;
      this.userName = localStorage.getItem("username")
      this.axios.get("user-page?current=" + this.current + "&size=" + this.size + "&userName=" + this.userName)
          .then(result => {
            this.users = result.data.data.records;
            this.pages = result.data.data.pages;
            this.total = result.data.data.total;
            this.user = this.users[0];
            this.updatePicture = JSON.parse(JSON.stringify(this.users[0]))
            console.log("===="+this.updatePicture)

          })

    },

    zdPassword(){
      this.eXPassword = this.updatePassword.oldPassword;
      this.axios.get("checkPwd?oldPassword="+this.eXPassword
      +"&userId="+this.user.userId)
          .then(result=>{
            console.log("==================验证密码=======================")
            console.log(result.data.data)
            this.message=result.data.data
            // if (result.data.code!='200'){
            //   this.message=result.data.message
            // }else {
            //   this.message="原密码正确"
            //   console.log(result.data)
            // }

          })

    },
    // 基本资料
    updateBuilding(user) {
      this.user = JSON.parse(JSON.stringify(user));
      this.newPassword = user.password

    },
    handleAvatarSuccess(res, file) {
      this.updatePicture.avatar = res.data;
    },
    updatePic(){
      console.log("----------this.updatePicture---------------------")
      console.log(this.updatePicture)
      this.axios.put("userForPic",this.updatePicture)
          .then(result =>{
            console.log(result.data)
            if (result.data.code == 200){
              this.localUsers(this.current)
            }
          })
    },
    savaUser2() {
      this.axios.put("user2", this.user)
          .then(result => {
            console.log(result.data);
            if (result.data.code == 200) {
              this.localUsers(this.current);
            }
          })
      this.user = {
        userId: 0,
        deptId: "",
        userName: "",
        nickName: "",
        userType: "",
        email: "",
        phonenumber: "",
        sex: "",
        avatar: "",
        password: "",
        status: "",
        createTime: "",
      }
    },

    savaUser() {
      this.user.password=this.updatePassword.newPassword
      this.axios.put("user", this.user)
          .then(result => {
            console.log(result.data);
            if (result.data.code == 200) {
              this.localUsers(this.current);
            }
          })
      this.user = {
        userId: 0,
        deptId: "",
        userName: "",
        nickName: "",
        userType: "",
        email: "",
        phonenumber: "",
        sex: "",
        avatar: "",
        password: "",
        status: "",
        createTime: "",
      }
    },
    toComfirmNewPassword(){
      if (this.updatePassword.confirmNewPassword==this.updatePassword.newPassword){
        this.message=""
      }else {
        this.message='两次密码不一致，重输'
      }
      if (this.updatePassword.oldPassword == this.updatePassword.newPassword){
        this.messaget=""
      }

    }
  },
  toNewOldPwd(){

  },
  mounted() {
    this.localUsers(1);
  }
}
</script>

<style scoped>
.box-card {
  position: relative;
  width: 364px;
  height: 537px;
  margin-left: 20px;
  margin-top: 10px;
}

.box-card2 {
  position: relative;
  margin-top: -540px;
  width: 1080px;
  height: 460px;
  margin-left: 410px;
}
.avatar {
  width: 130px;
  height: 130px;
  display: block;
  border: 1px;
  border-radius: 50%;

}

</style>